<template>
  <div ref="graphWrapRef">
    <h2>我的第三个maxgraph</h2>
    <button @click="doExport2Console">在console中查看xml</button>
    <button @click="zoomIn">缩小</button>
    <button @click="zoomOut">放大</button>
    <div id="graphcontainer3" ref="graphcontainerRef3" class="graphWrap graph-edit"></div>
  </div>
</template>

<script>
//import _ from "lodash";
import mxgraph from "@/utils/mxgraph";
const { mxRubberband, mxGraph, mxGraphModel, mxCodec, mxUtils, mxEdgeStyle, mxConstants } = mxgraph;
const MxGraph = mxGraph;
const MxRubberband = mxRubberband;
const MxGraphModel = mxGraphModel;
const MxCodec = mxCodec

export default {
  data() {
    return {
      graph: null
    };
  },
  mounted() {
    this.init();
  },
  methods: {

    init() {
      var container = document.getElementById('graphcontainer3')
      const model = new MxGraphModel()
      const graph = new MxGraph(container, model)
      this.graph = graph
      new MxRubberband(graph);
      graph.setEnabled(true)
       graph.setTooltips(true);
      graph.centerZoom = true;
      graph.resizeContainer = false;//graph放大或者缩小时，外层div是否跟着变化

       this.initLineStyle();

      var xmlString = this.getXml()
      var doc = mxUtils.parseXml(xmlString);
      var codec = new mxCodec(doc);
      codec.decode(doc.documentElement, graph.getModel());


    },
    doExport2Console() {
      var enc = new MxCodec()
      var node = enc.encode(this.graph.getModel())
      var mxgraphXml = mxUtils.getPrettyXml(node)
      console.log(mxgraphXml)
    },

    getXml() {
      return `
<mxGraphModel>
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <mxCell id="2" vertex="1" parent="1" value="Interval 1">
      <mxGeometry x="380" y="0" width="140" height="30" as="geometry"/>
    </mxCell>
    <mxCell id="3" vertex="1" parent="1" value="Interval 2">
      <mxGeometry x="200" y="80" width="380" height="30" as="geometry"/>
    </mxCell>
    <mxCell id="4" vertex="1" parent="1" value="Interval 3">
      <mxGeometry x="40" y="140" width="260" height="30" as="geometry"/>
    </mxCell>
    <mxCell id="5" vertex="1" parent="1" value="Interval 4">
      <mxGeometry x="120" y="200" width="240" height="30" as="geometry"/>
    </mxCell>
    <mxCell id="6" vertex="1" parent="1" value="Interval 5">
      <mxGeometry x="420" y="260" width="80" height="30" as="geometry"/>
    </mxCell>
    <mxCell id="7" edge="1" source="2" target="3" parent="1" value="Transfer1">
      <mxGeometry as="geometry">
        <Array as="points">
          <Object x="420" y="60"/>
        </Array>
      </mxGeometry>
    </mxCell>
    <mxCell id="8" edge="1" source="2" target="6" parent="1" value="">
      <mxGeometry as="geometry" relative="1" y="-30">
        <Array as="points">
          <Object x="600" y="60"/>
        </Array>
      </mxGeometry>
    </mxCell>
    <mxCell id="9" edge="1" source="3" target="4" parent="1" value="Transfer3">
      <mxGeometry as="geometry">
        <Array as="points">
          <Object x="260" y="120"/>
        </Array>
      </mxGeometry>
    </mxCell>
    <mxCell id="10" edge="1" source="4" target="5" parent="1" value="Transfer4">
      <mxGeometry as="geometry">
        <Array as="points">
          <Object x="200" y="180"/>
        </Array>
      </mxGeometry>
    </mxCell>
    <mxCell id="11" edge="1" source="4" target="6" parent="1" value="Transfer5">
      <mxGeometry as="geometry" relative="1" y="-10">
        <Array as="points">
          <Object x="460" y="155"/>
        </Array>
      </mxGeometry>
    </mxCell>
  </root>
</mxGraphModel>`
    },
    zoomIn() {
      this.graph.zoomIn();
    },
    zoomOut() {
      this.graph.zoomOut();
    },
    initLineStyle() {
      var style = this.graph.getStylesheet().getDefaultEdgeStyle();
      //style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
     	style[mxConstants.STYLE_EDGE] =mxEdgeStyle.TopToBottom
    }
  },
};
</script>
<style scoped>
.graphWrap {
  overflow: hidden;
  width: 621px;
  height: 441px;
  cursor: default;
  border: 1px solid grey;
}
.graph-edit {
  background: url("/images/grid.gif");
}
.graph-browse {
  background: none;
}
</style>
